import React, { Component } from "react";
import { Row, Col, Affix, Menu } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
  DeploymentUnitOutlined,
  StarOutlined,
  ForkOutlined,
  CrownOutlined,
  FileSearchOutlined
} from "@ant-design/icons";
import "./head.css";
import logo from './logo.png'
const { SubMenu } = Menu;
class Header extends Component {
  render() {
    return (
      <Affix>
        <div>
          <Row className="header">
            <Col xs={20} sm={20} md={10} lg={11} xl={10}>
              <Row justify="center">
                <Col span={22}>
                  <div className="header-logo">
                    <img
                      src={logo}
                      alt="logo"
                      style={{
                        width: "58px",
                        height: "58px",
                      }}
                    />
                    <div className="logo-text">
                      人物知识图谱
                    </div>
                    <div className="logo-etext">
                      <span style={{color:'#ff4d4f',fontWeight:'bold'}}>I</span>
                      <span style={{color:'#a0d911',fontWeight:'bold'}}>M</span>
                      <span style={{color:'#40a9ff',fontWeight:'bold'}}>U</span>
                      <span style={{color:'#b37feb',fontWeight:'bold'}}>K</span>
                      <span style={{color:'#ffec3d',fontWeight:'bold'}}>G</span>
                    </div>
                  </div>
                </Col>
              </Row>
            </Col>
            <Col className="memu-div" xs={4} sm={4} md={14} lg={13} xl={14}>
              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["0"]}>
                <Menu.Item key="1">首页</Menu.Item>
                <SubMenu
                  key="SubMenu1"
                  icon={<DeploymentUnitOutlined />}
                  title="知识图谱"
                >
                  <Menu.Item key="setting:1">知识图谱</Menu.Item>
                  <Menu.Item key="setting:2">多视图</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="SubMenu2"
                  icon={<ForkOutlined />}
                  title="构建工具"
                >
                  <Menu.Item key="setting:1">医学分词</Menu.Item>
                  <Menu.Item key="setting:2">实体识别</Menu.Item>
                  <Menu.Item key="setting:3">关系抽取</Menu.Item>
                  <Menu.Item key="setting:4">描述框架</Menu.Item>
                  <Menu.Item key="setting:5">标注平台</Menu.Item>
                  <Menu.Item key="setting:6">标注规范</Menu.Item>
                </SubMenu>

                <SubMenu
                  key="SubMenu3"
                  icon={<CrownOutlined />}
                  title="示范应用"
                >
                  <Menu.Item key="setting:1">医学知识问答</Menu.Item>
                  <Menu.Item key="setting:2">妇儿健康宣教</Menu.Item>
                </SubMenu>
                <Menu.Item key="2" icon={<FileSearchOutlined/>}>使用说明</Menu.Item>
                <Menu.Item key="3" icon={<UserOutlined />}>关于我们</Menu.Item>
              </Menu>
            </Col>
          </Row>
        </div>
      </Affix>
    );
  }
}
export default Header;
